<template>
  <div>
    <!--首行模块数据-->
    <div :class="this.$store.state.app.screenWidth<992?'row-card-mobile':'row-card'">
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-postcard" :style="{'font-size': this.iconSize,'color': '#149CFC'}" ></i>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.cardCount">{{homeNumberInfo.cardCount}}张</span>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-price-tag"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">卡总数</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-s-opportunity" :style="{'font-size':this.iconSize,'color': '#7C94F4'}"></i>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.monthNewCardCount">{{homeNumberInfo.monthNewCardCount}} 张</span>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-rank"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">本月新增</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-data-line" :style="{'font-size': this.iconSize,'color': '#63CB6C'}"></i>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.flowSum">{{homeNumberInfo.flowSum}} GB</span>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-else>0 GB</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-position"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">本月数据用量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-star-off" :style="{'font-size': this.iconSize,'color': '#D8D3B0'}"></i>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.activeCount">{{homeNumberInfo.activeCount}} 张</span>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-share"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-trophy" :style="{'font-size': this.iconSize,'color': '#FCDC74'}"></i>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-if="homeNumberInfo.monthActiveCount">{{homeNumberInfo.monthActiveCount}} 张</span>
          <span :style="{'font-size':  this.fontSize,'color': 'dimgray'}" v-else>0 张</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-s-unfold"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">本月激活总量</span>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-card-item-mobile':'row-card-item'">
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-top-mobile':'row-card-item-top'">
          <i class="el-icon-message" :style="{'font-size': this.iconSize,'color': '#23C586'}"></i>
          <span :style="{'font-size': this.fontSize,'color': 'dimgray'}" v-if="usableMessages">{{usableMessages}} 条</span>
          <span :style="{'font-size': this.fontSize ,'color': 'dimgray'}" v-else>0 条</span>
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-card-item-bottom-mobile':'row-card-item-bottom'">
          <i class="el-icon-coin"></i>
          <span :style="{'font-size':  this.$store.state.app.screenWidth<992?'12px':'14px','margin-left': '5px'}">可用短信数量</span>
        </div>
      </div>
    </div>
    <!--环形图-->
    <div :class="this.$store.state.app.screenWidth<800?'row-label-mobile':'row-label'">
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logoy.png" /> <span class="row-label-title-text">移动</span> {{homeNumberInfo.CardCount1}}</div>
        <ve-ring :data="chartData" :settings="chartSettings" class="row-card-chart-item"></ve-ring>
      </div>
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logod.png" /> <span class="row-label-title-text">电信</span> {{homeNumberInfo.CardCount2}}</div>
        <ve-ring :data="chartData1" :settings="chartSettings1" class="row-card-chart-item"></ve-ring>
      </div>
      <div :class="this.$store.state.app.screenWidth<800?'row-label-block-mobile':'row-label-block'">
        <div class="row-label-title"><img src="../../assets/images/logol.png" /> <span class="row-label-title-text">联通</span> {{homeNumberInfo.CardCount3}}</div>
        <ve-ring :data="chartData2" :settings="chartSettings2" class="row-card-chart-item"></ve-ring>
      </div>
    </div>
    <!--流量使用情况 -->
    <div :class="this.$store.state.app.screenWidth<992?'row-table-mobile':'row-table'">
      <div :class="this.$store.state.app.screenWidth<992?'row-table-chart-mobile':'row-table-chart'" >
        <div :class="this.$store.state.app.screenWidth<992?'row-label-title-mobile':'row-label-title'" >
          <div :class="this.$store.state.app.screenWidth<992?'row-label-title-top-mobile':'row-label-title-left'">
            <i class="el-icon-s-data" style="color: #ffc106;font-size: 30px;margin-right: 5px"></i>
            <span style="width: 210px"> 流量使用情况<span style="color: #999; font-size: 14px">(单位：GB)</span> ：</span>
          </div>
          <div :class="this.$store.state.app.screenWidth<992?'row-label-title-center-mobile':'row-label-title-middle'">
            <el-button :type="homeflowNumberType==='DAY'?'primary':''" size="small" @click="homeflowNumberChange('DAY')" >按日</el-button>
            <el-button :type="homeflowNumberType==='MONTH'?'primary':''" size="small" @click="homeflowNumberChange('MONTH')" >按月</el-button>
          </div>
          <div :class="this.$store.state.app.screenWidth<992?'row-label-title-bottom-mobile':'row-label-title-right'">
            <el-select v-model="value" placeholder="请选择" multiple :multiple-limit="5" @change="changePassage" style="width: 95%" v-if="options.length>0">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
          <ve-line :data="chartData4" class="row-table-chart-item" :style="{'width': this.$store.state.app.screenWidth<992?'992px':'90%','margin': '20px 5%'}" v-if="chartData4.rows.length>0"></ve-line>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-table-data-mobile':'row-table-data'" >
        <div class="row-label-title-fixed">
          <span v-if="homeflowNumberType==='DAY'">本月</span>
          <span v-if="homeflowNumberType==='MONTH'">本年</span>内使用流量排名
        </div>
        <div :class="this.$store.state.app.screenWidth<992?'row-table-data-table-mobile':'row-table-data-table'" >
          <el-table

            :data="tableData"
            highlight-current-row
            :header-cell-style="{background:'#9cace8',color:'#fff'}"
            style="margin:10px 1.5vw;width:calc(100% - 3vw)">
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center">
            </el-table-column>
            <el-table-column
              property="iccid"
              label="iccid"
              :width="this.$store.state.app.screenWidth<450?'200px':'auto'"
              align="center">
            </el-table-column>
            <el-table-column
              property="sumUsedFlow"
              label="期间内使用流量(GB)"
              :width="this.$store.state.app.screenWidth<450?'150px':'auto'"
              align="center">
            </el-table-column>
          </el-table>
        </div>
       <!-- :width="this.$store.state.app.screenWidth<992?'200px':'auto'"
        :width="this.$store.state.app.screenWidth<992?'200px':'auto'"-->
      </div>
    </div>
    <!--财务详情统计 -->
    <div :class="this.$store.state.app.screenWidth<992?'row-table-mobile':'row-table'">
      <div :class="this.$store.state.app.screenWidth<992?'row-table-chart-mobile':'row-table-chart'" >
        <div :class="this.$store.state.app.screenWidth<992?'row-label-title-mobile':'row-label-title'">
          <div :class="this.$store.state.app.screenWidth<992?'row-label-title-top-mobile':'row-label-title-left'">
            <i class="el-icon-coin" style="color: #ffc106;font-size: 30px;margin-right: 5px"></i>
            <span> 财务详情统计：</span>
          </div>
          <div :class="this.$store.state.app.screenWidth<992?'row-label-title-center-mobile':'row-label-title-middle'">
            <el-button :type="homeProfitNumberType==='DAY'?'primary':''" size="small" @click="homeProfitNumberChange('DAY')" >按日</el-button>
            <el-button :type="homeProfitNumberType==='MONTH'?'primary':''" size="small" @click="homeProfitNumberChange('MONTH')" >按月</el-button>
          </div>
        </div>
        <div :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
          <ve-line :data="chartData3" :settings="chartSettings3" class="row-table-chart-item" :style="{'width': this.$store.state.app.screenWidth<992?'992px':'90%','margin': '20px 5%'}" v-loading="chart3Loading" v-if="chartData3.rows.length>0"></ve-line>
        </div>
      </div>
      <div :class="this.$store.state.app.screenWidth<992?'row-table-data-mobile':'row-table-data'" >
        <div class="row-label-title-fixed"><span v-if="homeProfitNumberType==='DAY'">本月</span><span  v-if="homeProfitNumberType==='MONTH'">本年</span><span>利润详情统计</span></div>
        <div class="row-table-data-table" :style="{'overflow-x':this.$store.state.app.screenWidth<992?'scroll':'none'}">
          <el-table
            :data="tableData1"
            v-loading="loading"

            :header-cell-style="{background:'#9cace8',color:'#fff'}"
            highlight-current-row
            style="margin:10px 1.5vw;width:calc(100% - 3vw)" >
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center">
            </el-table-column>
            <el-table-column
              property="agentName"
              label="代理"
              :width="this.$store.state.app.screenWidth<450?'150px':'auto'"
              align="center">
            </el-table-column>
            <el-table-column
              property="cardCount"
              label="卡总数"
              :width="this.$store.state.app.screenWidth<450?'150px':'auto'"
              align="center">
            </el-table-column>
            <el-table-column
              property="profitForAgentSum"
              label="利润"
              :width="this.$store.state.app.screenWidth<450?'150px':'auto'"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getHomeNumber,// 查询首页数据
    getHomeflowNumber,// 流量使用情况
    getHomeProfitNumber,//财务详情统计
    getUsableCount,// oem查询可用短信数量的接口
  } from '@/api/getData'

  export default {
    name: 'newIndex',
    data() {
      this.chartSettings = {
        dimension: '卡状态',
        metrics: '总量',
        radius: [70, 100]
      },
      this.chartSettings1 = {
        dimension: '卡状态',
        metrics: '总量',
        radius: [70, 100]
      },
      this.chartSettings2 = {
        dimension: '卡状态',
        metrics: '总量',
        radius: [70, 100]
      },
      this.chartSettings3 = {
        metrics: ['总收入', '总返佣', '总利润'],
        dimension: ['日期'],
      }
      return {
        usableMessages: '',
        homeflowNumberType: 'DAY',
        homeProfitNumberType: 'DAY',
        homeNumberInfo: {
          cardNumber: '--',
          thisMonthNewCardNumber: '--',
          thisMonthCardFlow: '--',
          allActiveCount: '--',
          thisMonthActiveCount: '--',
          CardCount1: '--',
          CardCount2: '--',
          CardCount3: '--',
        },
        form: {
          name: '',
          phone: '',
          dynamicItem: [{
            name: '',
            phone: ''
          }]
        },
        formRules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'}
          ]
        },
        chartData: {
          columns: ['卡状态', '总量'],
          rows: [
            { '卡状态': '已激活', '总量': 0},
            { '卡状态': '去激活', '总量': 0},
            { '卡状态': '已停机', '总量': 0}
          ]
        },
        chartData1: {
          columns: ['卡状态', '总量'],
          rows: [
            {'卡状态': '已激活', '总量': 0},
            {'卡状态': '去激活', '总量': 0},
            {'卡状态': '已停机', '总量': 0}
          ]
        },
        chartData2: {
          columns: ['卡状态', '总量'],
          rows: [
            {'卡状态': '已激活', '总量': 0},
            {'卡状态': '去激活', '总量': 0},
            {'卡状态': '已停机', '总量': 0}
          ]
        },
        chart3Loading: false,
        chartData3: {
          columns: ['日期', '总收入', '总返佣', '总利润'],
          rows: []
        },
        tableData: [],
        tableData1: [],
        currentRow: null,
        chartData4: {
          columns: ['日期', ],
          rows: []
        },
        options: [],
        value: [],
        flowAccount: [],
        flowDate: [],
        chooseList: [],
        loading: false,
        fontSize: 0,
        iconSize:0,
      }

    },

    mounted() {
      this.changeScreenWidth()
      let _this = this;
      window.addEventListener('resize', function() {
        _this.changeScreenWidth()
      })
      this.initData()
    },
    methods: {
      changeScreenWidth(){
        if(this.$store.state.app.screenWidth<414){
          this.iconSize = 15 * (this.$store.state.app.screenWidth / 320);
          this.fontSize = 10 * (this.$store.state.app.screenWidth / 320);
        }
        else if(this.$store.state.app.screenWidth>=414&&this.$store.state.app.screenWidth<992){
          this.iconSize = 10 * (this.$store.state.app.screenWidth / 400);
          this.fontSize = 7 * (this.$store.state.app.screenWidth / 400);
        }
        else if(this.$store.state.app.screenWidth>=992&&this.$store.state.app.screenWidth<1920){
          this.iconSize = 10 * (this.$store.state.app.screenWidth / 500);
          this.fontSize = 8 * (this.$store.state.app.screenWidth / 600);
        }
        else if(this.$store.state.app.screenWidth>=1920){
          this.iconSize = 15 * (this.$store.state.app.screenWidth / 750);
          this.fontSize = 10 * (this.$store.state.app.screenWidth / 750);
        }
        this.iconSize += 'px';
        this.fontSize += 'px';
      },
      initData() {
        this.houmeNumber();
        this.homeProfitNumber();
        this.homeflowNumber();
        this.usableCount();
      },
      // 查询首页数据
      async houmeNumber(theKey) {
        const returnData = await getHomeNumber({}, {
          obj: this,
          key: 'tableLoading;' + theKey
        });
        this.homeNumberInfo = returnData.data;

        let chartItem = JSON.parse(returnData.data.operatorLine);
        if(chartItem!==null){
          if(chartItem.CARDMOBILE){
            this.homeNumberInfo.CardCount1 = chartItem.CARDMOBILE.CardCount;
            this.chartData.rows[0]['总量'] = chartItem.CARDMOBILE.ACTIVATE;
            this.chartData.rows[1]['总量'] = chartItem.CARDMOBILE.DEACTIVATED;
            this.chartData.rows[2]['总量'] = chartItem.CARDMOBILE.PAUSE;
          }
          if(chartItem.CARDTELECOM){
            this.homeNumberInfo.CardCount2 = chartItem.CARDTELECOM.CardCount;
            this.chartData1.rows[0]['总量'] = chartItem.CARDTELECOM.ACTIVATE;
            this.chartData1.rows[1]['总量'] = chartItem.CARDTELECOM.DEACTIVATED;
            this.chartData1.rows[2]['总量'] = chartItem.CARDTELECOM.PAUSE;
          }
          if(chartItem.CARDUNICOM){
            this.homeNumberInfo.CardCount3 = chartItem.CARDUNICOM.CardCount;
            this.chartData2.rows[0]['总量'] = chartItem.CARDUNICOM.ACTIVATE;
            this.chartData2.rows[1]['总量'] = chartItem.CARDUNICOM.DEACTIVATED;
            this.chartData2.rows[2]['总量'] = chartItem.CARDUNICOM.PAUSE;
          }
        }

      },
      homeflowNumberChange(type) {
        this.homeflowNumberType = type;
        this.homeflowNumber()
      },
      async homeflowNumber(theKey) {
        const returnData = await getHomeflowNumber({
          dictType: this.homeflowNumberType
        }, {
          obj: this,
          key: 'tableLoading;' + theKey
        });
        if(returnData._result){
          this.tableData = [];
          // this.tableData = new Array(...JSON.parse(returnData.data.flowRank));
          //表格数据
          let list = JSON.parse(returnData.data.flowRank);
          if(list.length>0){
            for(let item of list){
              let obj = {};
              obj.iccid = item.iccid;
              let flow = this.$MToGB.exe(item.sumUsedFlow);
              obj.sumUsedFlow = flow;
              this.tableData.push(obj)
            }
          }
          this.flowDate = [];
          if(JSON.parse(returnData.data.accountFlowLine)&&JSON.parse(returnData.data.accountFlowLine).dateList){
            this.flowDate = JSON.parse(returnData.data.accountFlowLine).dateList;
          }
          this.flowAccount = [];
          if(JSON.parse(returnData.data.accountFlowLine)&&JSON.parse(returnData.data.accountFlowLine).lineDateVOList){
            this.flowAccount = JSON.parse(returnData.data.accountFlowLine).lineDateVOList;

            this.options = [];
            this.flowAccount.forEach((item,index)=>{
              let obj = {};
              obj.label = item.name;
              obj.value = index + 1;
              this.options.push(obj);
            });
          }

          if(this.chooseList.length===0 && this.options.length>0){
            this.value = [1];
            let row = this.flowAccount[0];
            this.chooseList[0] = this.flowAccount[0];
            this.chartData4.columns = ['日期',row.name];
          }
          else if(this.chooseList.length>0 && this.options.length>0){
            this.chooseList = [];
            for(let i of this.value){
              let flow = this.$MToGB.exe(this.flowAccount[i-1]);
              this.chooseList.push(flow)
            }
          }

          this.chartData4.rows =[];
          this.flowDate.map((item, index) => {
            let data = {};
            if(this.homeflowNumberType==='DAY'){
              data['日期'] = item.substring(5,10);
            }
            else{
              data['日期'] = item
            }

            for (let row of this.chooseList) {
              data[row.name] = 0;
              if (row.data.length > 0) {
                let flow = this.$MToGB.exe(row.data[index])
                data[row.name] = flow;

              }
            }
            this.chartData4.rows.push(data)
          });
        }
      },
      changePassage(val){
        this.value = val;
        this.chooseList = [];
        this.chartData4.columns = ['日期'];
        for(let item of val){
          this.chooseList.push(this.flowAccount[item-1]);
          this.chartData4.columns.push(this.flowAccount[item-1].name)
        }
        this.chartData4.rows =[];
        this.flowDate.map((item, index) => {
          let data = {};
          data['日期'] = item
          if (this.homeflowNumberType === 'DAY') {
            data['日期'] = item.substring(5, 10);
          }
          for (let row of this.chooseList) {
            data[row.name] = 0;
            if (row.data.length > 0) {
              data[row.name] = row.data[index];
            }
          }
          this.chartData4.rows.push(data)
        })

      },

      homeProfitNumberChange(type) {
        // },
        this.homeProfitNumberType = type;
        this.homeProfitNumber()
      },
      async homeProfitNumber(dateType, theKey) {
        let _this = this;
        this.loading = true;
        this.chart3Loading = true;
        //财务详情统计
        const returnData = await getHomeProfitNumber({
          dateType: this.homeProfitNumberType
        },{
          obj: this,
          key: 'tableLoading;' + theKey
        });
        if(returnData._result){
          let list = [];
          if(this.homeProfitNumberType==='DAY'){
            _this.tableData1 = JSON.parse(returnData.data.profitRankMonth);
            list = JSON.parse(returnData.data.amountLineDay);
          }
          else if(this.homeProfitNumberType==='MONTH'){
            _this.tableData1 = JSON.parse(returnData.data.profitRankYear);
            list = JSON.parse(returnData.data.amountLineMonth);
          }

          if (list!==null&&list.dateList.length>0) {
            this.chartData3.rows = [];
            list.dateList.map((item, index) => {
              let data = {};
              if(this.homeProfitNumberType==='DAY'){
                data['日期'] = item.substring(5,10);
              }
              else{
                data['日期'] = item
              }
              data['总收入'] = list.lineDateVOList[0].data[index];
              data['总返佣'] = list.lineDateVOList[1].data[index];
              data['总利润'] = list.lineDateVOList[2].data[index];
              this.chartData3.rows.push(data);
              this.chart3Loading = false;
              this.loading = false;
            })
          } else {
            this.chart3Loading = false;
            this.loading = false
          }
        }
      },
      async usableCount() {
        let returnData = await getUsableCount({})
        if (returnData._result) {
          this.usableMessages = returnData.data
        }
      }
    }
  }
</script>

<style scoped>
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
  /*首行 模块数据 样式*/
  .row-card{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-y: scroll;
  }
  .row-card-mobile{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    overflow-x: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .row-card-item{
    width: 16%;
    height: 6vw;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    font-size: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-card-item-mobile{
    width: auto;
    height: 70px;
    position: relative;
    margin-right: 10px;
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    font-size: 14px;
    padding: 0 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-card-item-top{
    width: 90%;
    height: 65%;
    position: relative;
    border-bottom: 1px solid #DCDFE6;
    margin: 0 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .row-card-item-top-mobile{
    width: 110px;
    height: 65%;
    position: relative;
    border-bottom: 1px solid #DCDFE6;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .row-card-item-top-icon{
    font-size: 44px;
    color: cornflowerblue;
  }

  .row-card-item-top-font-mobile{
    //font-size: 14px;
    color: dimgray;
  }
  .row-card-item-bottom{
    width: 90%;
    height: 34%;
    position: relative;
    margin: 0 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #a9a9a9;
  }
.row-card-item-bottom-mobile{
  width: auto;
  height: 34%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  color: #a9a9a9;
}
  /*三大运营商*/
  .row-label{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
  }
  .row-label-mobile{
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .row-label-block{
    width: 32.7%;
    height: auto;
    position: relative;
    line-height: 50px;
    font-size: 18px;
    color: dimgray;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-label-block-mobile{
    width: 100%;
    height: auto;
    position: relative;
    line-height: 50px;
    font-size: 18px;
    color: dimgray;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
  }
  .row-label-title{
    width: 100%;
    height: 66px;
    position: relative;
    font-size: 18px;
    color: dimgray;
    border-bottom: 1px solid #DCDFE6;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .row-label-title-mobile{
    width: 100%;
    height: auto;
    position: relative;
    font-size: 18px;
    color: dimgray;
    border-bottom: 1px solid #DCDFE6;
    padding:10px 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
  }
  .row-label-title-top-mobile{
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-center-mobile{
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0;
  }
  .row-label-title-bottom-mobile{
    width: 100%;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
  }
  .row-label-title-left{
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-middle{
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .row-label-title-right{
    margin-left: 20px;
    width: 540px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }

  .row-label-title img{
    height: 30px;
    width: auto;
    margin-right: 10px;
  }
  .row-label-title-text{
    font-size: 24px;
    font-weight: bold;
    color: #696969;
    text-indent: 2px;
  }
  .row-card-chart-item{
    width: 30%;
    height: auto;
    position: relative;
    margin-top: 50px;
  }
  /*流量使用情况 及表格*/
  .row-table{
    width: 100%;
    height: 498px;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .row-table-mobile{
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
  }
  .row-table-chart{
    width: 66.3%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-table-chart-mobile{
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow-x: scroll;
  }
  .row-table-chart-item{
    margin: 30px 1% 0 2%;
    width: auto;
  }
  .row-table-data{
    width: 32.7%;
    height: 498px;
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .row-table-data-mobile{
    width: 100%;
    height: 498px;
    position: relative;
    right: 0;
    top: 0;
    border: 1px solid #DCDFE6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 10px;
  }

  .row-label-title-fixed{
    width: 100%;
    height: 66px;
    position: absolute;
    top: 0;
    background: #fff;
    z-index: 10;
    font-size: 18px;
    color: dimgray;
    border-bottom: 1px solid #DCDFE6;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .row-table-data-table{
    width: 100%;
    height: 432px;
    position: absolute;
    top: 66px;
    left: 0;
    overflow-y: scroll;
  }
  .row-table-data-table-mobile{
    width: 100%;
    height: 432px;
    position: absolute;
    top: 66px;
    left: 0;
    overflow-y: scroll;
    overflow-x: scroll;
  }
  .table-mobile{
    width: 992px;
    height: auto;
    margin: 0;
  }
  .table-pc{
    margin: 20px 3%;
  }
  @media screen and (min-width: 1920px) {
    .row-card-item-bottom{
      font-size: 16px;
    }
  }
</style>
